<template>
  <div :id="containerId"></div>
</template>

<script>
export default {
  props: ["containerId", "content", "visible"],
  data() {
    return {
      ue: null,
    };
  },
  watch: {
    visible() {
      if (this.visible) {
        setTimeout(() => {
          this.ue.setContent(this.content || "");
        }, 500);
      } else {
        this.ue.setContent("");
      }
    },
  },
  mounted() {
    const UE = window.UE;
    const containerId = this.containerId;
    var ue = (this.ue = UE.getEditor(containerId, {
      // autoHeightEnabled: false,
      toolbars: [
        ["fullscreen", "source", "undo", "redo"],
        [
          "bold",
          "italic",
          "underline",
          "fontborder",
          "strikethrough",
          "superscript",
          "subscript",
          "removeformat",
          "formatmatch",
          "autotypeset",
          "blockquote",
          "pasteplain",
          "|",
          "forecolor",
          "backcolor",
          "insertorderedlist",
          "insertunorderedlist",
          "selectall",
          "cleardoc",
        ],
      ],
    }));
    setTimeout(() => {
      this.ue.setContent(this.content || "");
    }, 500);
    ue.on("contentchange", () => {
      // console.log('contentchange', ue.getContent());
      this.$emit("onEditorChange", ue.getContent());
    });

    function isFocus(e) {
      alert(UE.getEditor(containerId).isFocus());
      UE.dom.domUtils.preventDefault(e);
    }

    function setBlur(e) {
      UE.getEditor(containerId).blur();
      UE.dom.domUtils.preventDefault(e);
    }

    function getSelectText() {
      var range = UE.getEditor(containerId).selection.getRange();
      range.select();
      var txt = UE.getEditor(containerId).selection.getText();
    }
  },
};
</script>